<template>
  <div class="launch">
    <div
      class="container-1200 main-container"
      style="height: 782px; position: relative"
    >
      <div class="container">
        <h1 class="mb-12">房源委托，帮您出租</h1>
        <h2 class="mb-46">海量客源，快速成交</h2>

        <!-- <area-select :data="pcaa"   v-model="valCity" :value="areaCascader"  :level="2"  type="all" @change="getChangeVal"> -->

        <div class="form">
          <el-form label-position="top" label-width="80px" :model="formData">
            <el-form-item label="联系人" style="margin-top: 22px">
              <el-input
                placeholder="联系人姓名"
                v-model="formData.name"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系方式（手机固话至少填写一个）">
              <el-input
                placeholder="手机号码"
                v-model="formData.contact"
              ></el-input>
            </el-form-item>
            <el-form-item label="投放写字楼">
              <div class="mb-10">
                <area-select
                  type='text'
                  class="flex"
                  v-model="formData.selected"
                  :data="pcaa"
                  :level="2"
                  @change="areaChange"
                ></area-select>
              </div>
              <el-input
                placeholder="请输入楼盘名..."
                v-model="formData.build_name"
              ></el-input>
            </el-form-item>
            <el-button
              class="button"
              type="primary"
              :disabled="btnDisabled"
              @click="submit"
              >立即投放</el-button
            >
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import pcaa from 'area-data/pcaa'
import { pca, pcaa } from 'area-data' // v5 or higher
import { postApiHousePutHouse } from '@/api'
import { Message } from 'element-ui'

export default {
  data() {
    return {
      formData: {
        name: '',
        contact: '',
        build_name: '',
        selected: [],
      },
      pca: pca,
      pcaa: pcaa,
      user_id: null,
    }
  },
  computed: {
    btnDisabled() {
      if (
        this.formData.name &&
        this.formData.contact &&
        this.formData.build_name &&
        this.formData.selected.length === 3
      ) {
        return false
      }
      return true
    },
  },
  created() {
    const id = localStorage.getItem('id')
    if (!id) {
      this.$router.push('login')
    } else {
      this.user_id = id
    }
  },
  methods: {
    submit() {
      const params = {
        user_id: this.user_id,
        user_name: this.formData.name,
        phone: this.formData.contact,
        province: this.formData.selected[0],
        city: this.formData.selected[1],
        district: this.formData.selected[2],
        build_name: this.formData.build_name,
      }
      postApiHousePutHouse(params).then((res) => {
        if (res.code === 200) {
          Message.success(res.msg)
          this.formData = {
            name: '',
            contact: '',
            build_name: '',
            selected: [],
          }
        } else {
          Message.warning(res.msg)
        }
      })
    },
    areaChange(val) {
      console.log('val: ', val)
    },
  },
}
</script>

<style lang="less" scoped>
.launch {
  height: 782px;
  background-image: url(~@/assets/images/launch_bg.png);
  background-repeat: no-repeat;
  background-position: center;

  /deep/ .area-select-wrap {
    width: 100%;
    height: 40px;
    .area-select {
      height: 40px;
      margin: 0;
      line-height: 26px;
      border-radius: 0;
    }
  }
  .main-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .container {
    // position: absolute;
    // bottom: 0;
    // left: 50%;
    // height: 50%;
    // transform: translate(-50%, 0%);
    .form {
      padding: 92px 38px 24px;
      width: 450px;
      box-sizing: border-box;
      background-image: url(~@/assets/images/launch-flow.png);
      background-repeat: no-repeat;
      background-position: top center;
      background-color: white;
      .button {
        background-color: #c7343c;
        border-radius: 0;
        border: none;
        margin: 0 auto;
        display: block;
        &.is-disabled {
          background-color: #d7d7d7;
          color: #999;
        }
      }
      /deep/ .el-form-item {
        .el-form-item__label {
          line-height: 1;
        }
        .el-input__inner {
          border-radius: 0;
        }
      }
    }
  }
  .mb-10 {
    margin-bottom: 12px;
  }
  .mb-12 {
    margin-bottom: 12px;
  }
  .mb-46 {
    margin-bottom: 46px;
  }
  h1,
  h2 {
    color: white;
    text-align: center;
  }
  h1 {
    font-size: 40px;
    font-weight: bold;
  }
  h2 {
    font-size: 18px;
  }
}
</style>
